<template>
  <div class="count">
    <div style="margin-bottom: 24px">
      <el-upload
        action="https://creationapi.shbwyz.com/api/file/upload?unique=0"
        :headers="headers"
        :on-success="filesuccess"
        class="ant-upload ant-upload-drag"
      >
        <span
          tabindex="0"
          class="ant-upload ant-upload-btn"
          role="button"
        >
          <input
            type="file"
            accept=""
            multiple=""
            style="display: none"
          >
          <div class="ant-upload-drag-container">
            <p class="ant-upload-drag-icon">
              <span
                role="img"
                aria-label="inbox"
                class="anticon anticon-inbox"
              ><svg
                viewBox="0 0 1024 1024"
                focusable="false"
                data-icon="inbox"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
                /></svg></span>
            </p>
            <p class="ant-upload-text">
              点击选择文件或将文件拖拽到此处
            </p>
            <p class="ant-upload-hint">
              文件将上传到 OSS, 如未配置请先配置
            </p>
          </div>
        </span>
      </el-upload>
    </div>
    <el-form ref="searchForm" :inline="true" :model="search">
      <el-form-item label="文件名" prop="originalname">
        <el-input
          v-model="search.originalname"
          placeholder="请输入发件人"
        />
      </el-form-item>
      <el-form-item label="文件类型" prop="type">
        <el-input v-model="search.type" placeholder="请输入文件类型" />
      </el-form-item>
      <p>
        <el-form-item class="operate">
          <el-button
            type="primary"
            @click="submitForm"
          >搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </p>
    </el-form>
    <div style="background: rgb(255, 255, 255); padding: 16px 12px">
      <div class="content">
        <div class="ant-row">
          <div
            v-for="item in fileList"
            :key="item.id"
            v-loading="loading"
            style="width: 25%; max-width: 25%"
            @click="showdrawer(item)"
          >
            <div class="ant-col">
              <div class="box-shadow">
                <div class="ant-list-item">
                  <div class="ant-card-cover">
                    <img :src="item.url" alt="">
                  </div>
                  <div class="ant-card-body">
                    <p>{{ item.originalname }}</p>
                    <p>{{ item.createAt }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <image-viewer>
          <el-drawer
            title="文件信息"
            :visible.sync="drawer"
            :direction="direction"
            size="640px"
            :before-close="handleClose"
          >
            <div class="ant-drawer-body">
              <div class="imgbox">
                <img alt="psc.jpg" :src="item.url">
              </div>
              <div class="ant-col-24">
                <div class="">
                  <div class="filenameurl">
                    <p>文件名称:</p>
                    <p>{{ item.originalname }}</p>
                  </div>
                </div>
              </div>
              <div class="ant-col-24">
                <div class="">
                  <div class="filenameurl">
                    <p>存储路径:</p>
                    <p>{{ item.filename }}</p>
                  </div>
                </div>
              </div>
              <div class="ant-col-24" style="display: flex">
                <div class="fileinfo">
                  <p>文件类型: {{ item.type }}</p>
                  <p>
                    文件大小:
                    {{ (item.size / 1024).toFixed(2) }}kb
                  </p>
                </div>
              </div>
              <div class="ant-col-24">
                <div class="findlink">
                  <div style="margin-right: 10px">
                    访问链接:
                  </div>
                  <div>
                    <div class="linkurl" @click="copyimg()">
                      {{ item.url }}
                    </div>
                    <p class="copy" @click="copyimg()">
                      复制
                    </p>
                  </div>
                </div>
              </div>
              <div class="del">
                <el-button
                  plain
                  @click="drawer = false"
                >关闭</el-button>
                <el-popover
                  v-model="visible"
                  placement="top"
                  width="160"
                >
                  <p>确认删除这个文件？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      size="mini"
                      type="text"
                      @click="visible = false"
                    >取消</el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="confirm"
                    >确定</el-button>
                  </div>
                  <el-button
                    slot="reference"
                    type="danger"
                    plain
                  >删除</el-button>
                </el-popover>
              </div>
            </div>
          </el-drawer>
        </image-viewer>
      </div>
      <div class="paging">
        <el-pagination
          :current-page="1"
          :page-sizes="[12, 16, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="fileCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <footer>
      <ul class="_24OUzUa2SjssS1_EshUigc">
        <li>
          <a
            class="_283jLEQ1DhWAe2fw-CeVAf"
            href="https://github.com/fantasticit/wipi"
            target="_blank"
            rel="noreferrer"
          ><span
            role="img"
            aria-label="github"
            class="anticon-github"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="github"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
            /></svg></span></a>
        </li>
      </ul>
      <div class="_2nq88U0e2iY4tDIjMmuVWA">
        <p>
          Copyright
          <span
            role="img"
            aria-label="copyright"
            class="anticon-copyright"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="copyright"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"
            /></svg></span>
          <!-- -->2021<!-- -->
          Designed by<a
            href="https://github.com/fantasticit/wipi"
            target="_blank"
            rel="noreferrer"
          >
            <!-- -->Fantasticit.</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import ImageViewer from '../../components/ImageView/ImageViewer.vue'
import copy from 'copy-to-clipboard'
import { Message } from 'element-ui'
import { getToken } from '../../utils/auth'
export default {
  components: {
    ImageViewer
  },
  data() {
    return {
      search: {
        originalname: '',
        type: ''
      },
      headers: {},
      page: 1,
      pageSize: 12,
      drawer: false,
      direction: 'rtl',
      loading: false,
      item: {},
      visible: false
    }
  },
  computed: {
    ...mapState({
      fileList: (state) => state.file.fileList,
      fileCount: (state) => state.file.fileCount
    })
  },
  created() {
    this.headers = { Authorization: `Bearer ${getToken()}` }
    this.submitForm()
  },
  methods: {
    ...mapActions({
      getFilePage: 'file/getFilePage',
      DeletFile: 'file/DeletFile'
    }),
    async submitForm() {
      this.loading = true
      const options = {}
      for (const key in this.search) {
        this.search[key] && (options[key] = this.search[key])
      }
      await this.getFilePage({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
      this.loading = false
    },
    async handleSizeChange(val) {
      this.pageSize = val
      const options = {}
      await this.getFilePage({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
      console.log(`每页 ${val} 条`)
    },
    async handleCurrentChange(val) {
      this.page = val
      const options = {}
      await this.getFilePage({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
      console.log(`当前页: ${val}`)
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    handleClose(done) {
      done()
    },
    showdrawer(item) {
      this.drawer = true
      this.item = item
    },
    copyimg() {
      copy(this.item.url)
      Message.success('内容已复制到剪贴板')
    },
    confirm() {
      this.visible = false
      console.log(this.item.id)
      this.DeletFile({ id: this.item.id, page: this.page, pageSize: this.pageSize })
      this.drawer = false
      this.submitForm()
    },
    filesuccess() {
      this.submitForm()
    }
  }
}
</script>

<style scoped lang='scss'>
.count {
    width: 100%;
    height: 100%;
    background: rgb(241, 241, 241);
    flex: 1;
    padding: 24px;
    overflow: auto;
}
.ant-upload.ant-upload-drag {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s;
}
.ant-upload.ant-upload-drag {
    background: #fff !important;
}
.ant-upload:hover {
    border-color: #409eff;
}
.anticon {
    // color: #29a2ff;
    font-size: 48px;
    display: inline-block;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.el-form-item {
    margin-bottom: 0;
}
form {
    background: #fff;
    padding: 20px 12px;
    margin-bottom: 16px;
}
.operate {
    margin-left: 75%;
}
.paging {
    margin-top: 20px;
}
.el-pagination {
    text-align: right;
}
.content {
    position: relative;
    transition: opacity 0.3s;
    margin-top: 16px;
    box-sizing: border-box;
}
.ant-row {
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
    flex-flow: row wrap;
}
.ant-col {
    padding-left: 8px;
    padding-right: 8px;
    flex: 1 1 auto;
    position: relative;
    max-width: 100%;
    min-height: 1px;
}
.box-shadow:hover {
    margin-top: 0;
    box-shadow: 0 8px 8px 1px #e6e4e4;
    transition: all 0.5s;
}
.ant-list-item {
    display: block;
    max-width: 100%;
    margin-bottom: 16px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    font-feature-settings: "tnum";
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}
.ant-card-cover {
    position: relative;
    margin-top: -1px;
    margin-right: -1px;
    margin-left: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    color: #888;
    background-color: #f5f5f5;
    overflow: hidden;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
}
.ant-card-body {
    padding: 0 16px;
    border: 1px solid #eee;
}
.ant-card-body p {
    overflow: hidden;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
footer {
    padding: 20px 0;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
    ul {
        display: inline-flex;
        list-style: none;
        font-size: 24px;
        margin: 8px 0 6px;
        margin-right: 24px;
    }
    ._2nq88U0e2iY4tDIjMmuVWA {
        font-size: 10px;
        line-height: 15px;
    }
}
.imgbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 360px;
    margin-bottom: 12px;
    color: #888;
    background-color: #f5f5f5;
    overflow: hidden;
}
.ant-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 6px 24px;
    font-size: 14px;
    line-height: 1.2;
    margin-top: -25px;
    word-wrap: break-word;
}
.el-drawer__header {
    border-bottom: 1px solid #000;
    margin-bottom: 12px !important;
}
.ant-drawer .imgbox img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
}
.del {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid rgb(232, 232, 232);
    padding: 10px 16px;
    text-align: right;
    left: 0px;
    background: rgb(255, 255, 255);
    border-radius: 0px 0px 4px 4px;
}
.copy {
    color: #0188fb;
    cursor: pointer;
    box-shadow: none;
    margin-top: 10px;
}
.fileinfo {
    width: 100%;
    display: flex;
    margin-top: -12px;
    :nth-child(2) {
        margin-left: 200px;
    }
}
.ant-col-24 {
    flex-flow: row wrap;
}
.findlink {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 7px;
    overflow: hidden;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.linkurl {
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid #dedede;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    color: rgb(117, 117, 117);
}
.filenameurl {
    display: flex;
}
.filenameurl p:nth-child(2) {
    margin-left: 6px;
}
</style>
